﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>赋码管理</title>
    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
      <style>
      .layui-table-cell {
  height: auto!important;
  white-space: normal;
}
.layui-table img {
  max-width: 50px; /* 根据需要调整 */
  max-height: 50px; /* 根据需要调整 */
}
    </style>
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <label class="layui-form-label">条码类型： </label>
                <div class="layui-input-block" style="width:180px">
                    <select id="BarcodeType" lay-filter="aihao">
                        <option value="" selected>请选择条码类型</option>
                        <option value="物流产品条码">物流产品条码</option>
                        <option value="包装条码">包装条码</option>
                        <option value="库存条码">库存条码</option>
                        <option value="设备码">设备码</option>
                        <option value="工作站码">工作站码</option>
                        <option value="仓库码">仓库码</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <label class="layui-form-label">业务名称：</label>
                <input type="text" style="width:170px" id="RecptName" value="" placeholder="请输入业务名称" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-input-wrap">
                <label class="layui-form-label">业务编码：</label>
                <input type="text" style="width:170px" id="BussinessCode" value="" placeholder="请输入业务编码" class="layui-input" lay-affix="clear">
            </div>
        </div>
       
        <div class="layui-btn-container ">
            <button class="layui-btn" lay-submit lay-filter="demo-table-search">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">清空</button>
        </div>
    </form>
    <table class="layui-hide custom-row-height" id="test" ></table>
    <script type="text/html" id="imgTpl">
  <img src="{{ d.barcodeUrl }}" style="width:50px;height:50px;">
</script>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
             var laydate = layui.laydate;
            //显示
            function show() {
                table.render({
                    elem: '#test',
                    url: '/Song/GetWmBarCode',
                    maxHeight: '530px',
                     page: true, //开启分页
                     limit: 10,
                     limits: [10, 20, 50, 100],
                      request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                    cols: [[
                        { field: 'barcodeUrl', title: '条码', width: 150 ,templet: '#imgTpl'},
                        { field: 'barcodeFormart', title: '条码格式', width: 120 },
                        { field: 'barcodeType', title: '条码类型', width: 120 },
                        { field: 'barcodeContent', title: '条码内容', width: 220 },
                        { field: 'bussinessCode', title: '业务编码', width: 220 },
                        { field: 'bussinessName', title: '业务名称', width: 120 },
                        {
                            field: 'enableFlag', title: '是否生效', width: 120, templet: function (row) {
                                var tmp = row.enableFlag == 'Y' ? "是" : "否";
                                return tmp;
                            }
                        },
                    ]],
                });
            }
            show();//初始化显示
            // 搜索提交
            form.on('submit(demo-table-search)', function (data) {
                var BarcodeType = $("#BarcodeType").val();    //分类名称
                var BussinessCode = $("#BussinessCode").val();    //是否启用
                var BussinessName = $("#BussinessName").val();
                // 执行搜索重载
                table.reload('test', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: {
                        BarcodeType: BarcodeType,
                        BussinessCode: BussinessCode,
                        BussinessName: BussinessName    ,
                    }// 搜索的字段
                });
                return false; // 阻止默认 form 跳转
            });
        });
    </script>
</body>
</html>